<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 500px;
				height: 500px;				
			}
		</style>
	</head>
	<body>
		<div>
			<img src="images/5977f8252dc6c.png" width="500"/>
		</div>
		<button id="red">衣服1</button>
		<button id="yellow">衣服2</button>
		<button id="blue">衣服3</button>
		<script type="text/javascript">
			/*获取div和按钮*/
			var div=document.getElementsByTagName('div')[0];
			var red=document.getElementById('red');
			var yellow =document.getElementById('yellow');
			var blue=document.getElementById('blue');
			/*三个点击事件*/
			red.addEventListener('click',function(){
				div.style.backgroundImage="url(images/bg_1.jpg)";
			});
			yellow.addEventListener('click',function(){
				div.style.backgroundImage="url(images/bg_2.jpg)";
			});
			blue.addEventListener('click',function(){
				div.style.backgroundImage="url(images/bg_3.jpg)";
			});
		</script>
	</body>
</html>
